@charset "utf-8";
$font-size:40;
@function rem($px) {
    @return $px/$font-size*1rem;
}

#productfinish2{
    width: rem(249);
    height: rem(183);
    background: rgba(0,0,0,0.5);
    border-radius: rem(10);
    position: absolute;
    top:rem(500) ;
    left: rem(196);
    z-index: 99;
    display: none;
    
    .finishimg{
        width: rem(69);
        height: rem(69);
        margin:  rem(15) auto rem(15) auto;
        img{
            width: 100%;
            height: 100%;
        }
    }
    p{
        text-align: center;
        font-size:rem(28) ;
        color: white;
    }
}
.top{
    width: 100%;
    background: #FFFFFF;
    border-bottom: rem(1) solid #CCCCCC;
    height: rem(170);
    
    .mian-content{
        width: 90%;
        margin: 0 auto ;
        padding-top: rem(25);
        .mian{
            width: rem(120);
            height: rem(120);
            float: left;
            img{
                width: 100%;
                height: 100%;
            }
            
        }
        .mian-msg{
            overflow-x: hidden;
            
            h6{
            margin-left: rem(8);
            font-size: rem(28);
            line-height: rem(39);
            overflow : hidden; 
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;

        }
        p{
             margin-left: rem(8);
            font-size: rem(24);
            color: #999999;
            line-height: rem(60);
                
            }
        }
    }
}

.center-msg{
    width: 100%;
    height: rem(262);
    background: #FFFFFF;
    margin-top: rem(20);
    border-top: rem(1) solid #CCCCCC;
    border-bottom: rem(1) solid #CCCCCC;
    
    .xian{
        width: 100%;
         border-bottom: rem(1) solid #CCCCCC;
    }
    .msg{
        width: 90%;
        height: rem(86);
        margin: 0 auto;
       
        h6{
            line-height: rem(86);
            font-size: rem(23);
            float: left;
        }
        p{
             line-height: rem(86);
            font-size: rem(23);
            float: right;
        }
    }
}

.bottom-msg{
    width: 100%;
    height: rem(177);
    padding-top: rem(13);
    border-bottom: rem(1) solid #CCCCCC;
    background: #fff9e6;
     .input-bottom{
            width: 90%;
            margin: rem(23) auto 0 auto;
            h6{
                font-size: rem(27);
                float: left;
            }
            p{
                font-size: rem(27);
                float: right;
                span{
                    color: red;
                }
            }
        }
    .input-msg{
        width: 90%;
        height: rem(88);
        margin: 0 auto;
        border-radius: rem(5);
        background: #FFFFFF;
        border: rem(1) solid #CCCCCC;
        h6{
            line-height: rem(88);
            margin-left: rem(20);
            float: left;
            font-size: rem(30);
        }
        .input-msg-right{
            float: right;
            margin-right: rem(20);
            margin-top: rem(23);
            font-size: rem(30);
            color: black;
            line-height: rem(38);
            input[type="number"]{
                width: rem(90);
                height: rem(30);
                border: 0;
                text-indent: rem(4);
            }
        }
       
    }
    
}
footer{
    a{
        display: block;
        width: rem(270);
        height: rem(70);
       
        margin: rem(14) auto 0 auto;
        background: #d62d31;
        border-radius: rem(5);
        text-align: center;
        line-height: rem(70);
        color: white;
    }
}
